<template>
  <QfPage title="公司管理">
    <template #hd>
      <el-row>
        <el-col :span="5">
          <el-button @click="showAddDialog = true"> 新增</el-button>
        </el-col>
        <el-col :span="4" :offset="1">
          是否只看vue <el-switch v-model="isVue" />
        </el-col>
        <el-col :span="4" :offset="1">
          是否只看React <el-switch v-model="isReact" />
        </el-col>
      </el-row>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="公司id" width="180" />
      <el-table-column prop="name" label="公司名称" width="180" />
      <el-table-column prop="areaid" label="公司所在区域">
        <template #default="{ row }">
          {{ formatArea(row.areaid) }}
        </template>
      </el-table-column>
      <el-table-column prop="isVue" label="是否使用vue">
        <template #default="scope">
          {{ scope.row.isVue ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column prop="isReact" label="是否使用React">
        <template #default="scope">
          {{ scope.row.isReact ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="{ row }">
          <el-button type="danger" plain @click="handleDelete(row.id)">
            删除
          </el-button>
          <el-button type="primary" plain @click="handleEditOpen(row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #ft>
      <el-pagination
        small
        background
        layout="prev, pager, next,sizes"
        :total="total"
        class="mt-4"
        :page-sizes="[5, 10, 30, 50]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </template>
    <!--  添加弹窗  -->
    <el-dialog
      v-model="showAddDialog"
      title="添加公司信息"
      width="600px"
      center
    >
      <el-form :model="companyInfo" ref="addForm" label-width="100px">
        <el-form-item label="公司名称">
          <el-input v-model="companyInfo.name" />
        </el-form-item>
        <el-form-item label="公司所在区域">
          <el-cascader v-model="companyInfo.areaid" :options="regionDataPlus" />
        </el-form-item>
        <el-form-item label="使用vue">
          <el-switch v-model="companyInfo.isVue" />
        </el-form-item>
        <el-form-item label="使用React">
          <el-switch v-model="companyInfo.isReact" />
        </el-form-item>
        <el-form-item label="其他要求技能">
          <el-input
            type="textarea"
            :rows="4"
            :autosize="{ minRows: 4, maxRows: 4 }"
            v-model="companyInfo.skill"
          />
        </el-form-item>
        <el-form-item label="公司描述">
          <el-input
            type="textarea"
            :rows="4"
            :autosize="{ minRows: 4, maxRows: 4 }"
            v-model="companyInfo.desc"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="confirm">添加</el-button>
      </template>
    </el-dialog>
    <!-- 编辑抽屉 -->
    <el-drawer v-model="showEdit" title="编辑公司信息">
      <el-form :model="companyInfo" ref="addForm" label-width="100px">
        <el-form-item label="公司名称">
          <el-input v-model="companyInfo.name" />
        </el-form-item>
        <el-form-item label="公司所在区域">
          <el-cascader v-model="companyInfo.areaid" :options="regionDataPlus" />
        </el-form-item>
        <el-form-item label="使用vue">
          <el-switch v-model="companyInfo.isVue" />
        </el-form-item>
        <el-form-item label="使用React">
          <el-switch v-model="companyInfo.isReact" />
        </el-form-item>
        <el-form-item label="其他要求技能">
          <el-input
            type="textarea"
            :rows="4"
            :autosize="{ minRows: 4, maxRows: 4 }"
            v-model="companyInfo.skill"
          />
        </el-form-item>
        <el-form-item label="公司描述">
          <el-input
            type="textarea"
            :rows="4"
            :autosize="{ minRows: 4, maxRows: 4 }"
            v-model="companyInfo.desc"
          />
        </el-form-item>
      </el-form>
      <el-button @click="confirmEdit"> 确认修改 </el-button>
    </el-drawer>
  </QfPage>
</template>

<script lang="ts">
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
export default {
  name: 'comIninin',
  beforeRouteUpdate (
    to: RouteLocationNormalized,
    from: RouteLocationNormalized,
    next: NavigationGuardNext
  ) {
    // 组件的内置钩子 发生在路由信息变化之前
    // 使用的场景就是需要监听路由参数的变化而路由的路径并没有发改变的时候
    console.log('通过 beforeRouteUpdate 来监听路由信息的变化', to)
    next()
  },

  beforeRouteEnter (
    to: RouteLocationNormalized,
    from: RouteLocationNormalized,
    next: NavigationGuardNext
  ) {
    // 组件内的守卫钩子,页面进入之前
    console.log('不给进')
    console.log(to, next, from)
    next()
    // 用是否执行next方法来判定是否能进去该页面
  },
  beforeRouteLeave (
    to: RouteLocationNormalized,
    from: RouteLocationNormalized,
    next: NavigationGuardNext
  ) {
    // 组件内的守卫钩子,页面进入之后
    const { path } = to
    // if (path !== '/qati') return next()
    // 判断路径是否不为题库管理页面，返回一个next方法
    next()
  }
}
</script>
